<template >
    <el-card class="move">
        <div>
            <span>本地mqtt</span> 
            <el-button type="primary" @click="connectMqtt">连接mqtt</el-button>
        </div>
        <div class="mqttChart" ref="mqttChart"></div>
    </el-card>
</template>

<script>
    import * as mqtt from 'mqtt'
    import * as echarts from 'echarts'
    export default {
        name:'DataMqtt',
        data() {
            return {  
                option:{
                    username: 'user',
                    password:'123456'
                },
                date: [],  // 计时
                X: [],  // x轴数据
                Y: [],  // y轴数据
                Z:[],   // z轴数据
                data:[],  // 订阅的数据
                index: 0,  // 计时的标记
            }
        },
        methods: {
            connectMqtt() {
                let that = this
                const client  = mqtt.connect('ws://000:3000', this.option)
                client.on("connect", () => {
                    console.log("服务器连接成功")
                    client.subscribe("test/mqtt", { qos: 1 })
                })
                client.on('reconnect', () => {
                    console.log('重新链接')
                })
                client.on('error',(err) => {
                    console.log(err)
                    console.log('链接失败')
                })
                client.on("message", function(top, message) {
                    console.log("当前topic:", top)
                    console.log("当前数据：", message.toString())
                    that.data =  message.toString().split('#') // 拆数据
                })
            },
            chartUpdata(){
                    // 确保数组中有20个数据
                    this.X.shift()
                    this.Z.shift()
                    this.Y.shift()
                    this.X.push(parseFloat(this.data[1]))
                    this.Y.push(parseFloat(this.data[3]))
                    this.Z.push(parseFloat(this.data[5]))
                    this.index++
                    this.date.push(this.index)
                    this.date.shift()
                    // 重新装载可以看echarts文档
                    this.myChart.setOption({
                        xAxis:{
                            data:this.date
                        },
                        series:[ {
                            data: this.X,
                            type: 'line',
                            smooth: true
                        },
                        {
                            data: this.Y,
                            type: 'line',
                            smooth: true
                        },
                        {
                            data: this.Z,
                            type: 'line',
                            smooth: true
                        }]})
            },
             initArray(list) {
                // 将数组push 0,初始化好
                for(let i=0; i <20;i++){
                    list.push(0)
                }
            }
        },
        mounted() {
            // 初始化echarts, theme为light
            this.myChart = echarts.init(this.$refs.mqttChart, 'light')
            let option =  {
                        legend: {
                            data: ['X轴', 'Y轴', 'Z轴'],
                        },
                        xAxis: {
                            type: 'category',
                            data: this.date,
                            name: '时间/300ms'
                        },
                        yAxis: {
                            type: 'value',
                            name: '角度'
                        },
                        series: [
                            {
                                name: 'X轴',
                                data: this.X,
                                type: 'line',
                                smooth: true
                            },
                            {
                                name: 'Y轴',
                                data: this.Y,
                                type: 'line',
                                smooth: true
                            },
                            {
                                name:'Z轴',
                                data: this.Z,
                                type: 'line',
                                smooth: true
                            }
                        ]
                    }
            this.myChart.setOption(option)	// echarts设置初始化选项
            setInterval(this.chartUpdata, 300)	// 1秒秒更新实时数据到折线图
        },
        created() {
            this.initArray(this.date)
            this.initArray(this.X)
            this.initArray(this.Y)
            this.initArray(this.Z)
        }
    }
</script>

<style lang="less" scoped>
    .el-card{
        width: 100%;
        height: 626px;
        border-radius: 20px;
        margin-top: 40px;
        transform: translateY(0);
        transition: .2s linear; 
        .mqttChart {
            width: 100%;
            height: 500px;
        }
        .el-button{
            margin-left: 100px;
        }
    }
    .move:hover{
        box-shadow:0px 4px 4px #c8c8c8;
        transform: translateY(-6px);
        transition: .2s linear;
    }
</style>